<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
  <style>

  :root[data-darkmode="true"] {
    .card {
      background: linear-gradient(rgb(0, 0, 0), rgb(70, 70, 70));
    }

    .card .additional {
      background: linear-gradient(#337ab7, rgb(70, 70, 70));
    }
    
    .card .general .dler-title{
      color: #bbbbbb;
    }

    .card .general .dler-result{
      color: #bbbbbb;
    }

    .card .general .dler-result2{
      color: #bbbbbb;
    }

    .card .general h1 {
      color: #bbbbbb;
    }

    .card .additional .user-card::after {
      border-left: 2px solid #bbbbbb;
    }

    .card .additional .more-info h1 {
      color: #bbbbbb;
    }

    .card .additional .coords {
      color: #bbbbbb;
    }
  }

  .center {
    top: 50%;
    left: 50%;
    min-width: 800px;
  }

  .card {
    width: 100%;
    height: 250px;
    background-color: #fff;
    background: linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
    border-radius: 6px;
    position: relative;
  }

  .card h1 {
    text-align: center;
  }

  .card .additional {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(#337ab7, #fefefe);
    transition: width 0.5s;
    overflow: hidden;
    z-index: 2;
  }

  .card .additional .user-card {
    width: 150px;
    height: 100%;
    position: relative;
    float: left;
  }

  .card .additional .user-card::after {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    right: -2px;
    height: 80%;
    border-left: 2px solid rgba(0,0,0,0.025);
  }

  .card .additional .user-card img {

    left: 20%;
    bottom: 30%;
    width: 60%;
    border-radius: 60%;
    position: absolute;

  }

  .card .additional .more-info {
    position: relative;
    top: 28%;
    height: 50%;
    margin: 0 auto;
    width: 50%;
    padding-left: 150px;
    padding-top: 1%;
  }

  .card .additional .more-info h1 {
    color: #fff;
    margin-bottom: 0;
    margin: 0 1rem;
    font-size: 2rem;
    position: relative;
  }

  .card .additional .coords {
    margin: 0 1rem;
    color: #fff;
    font-size: 1rem;
    position: relative;
    top: 10%;
    text-align: center;
    overflow: hidden;
    line-height: 20px;
  }

  .card .general {
    width: auto;
    height: 100%;
    position: relative;
    margin-left: 150px;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 0;
  }

  .card .general h1 {
    font-size: 30px;
    text-align: center;
    padding-top: 5px;
    margin: 0 0 0 -12%;
    line-height: 35px;
    color: black;
  }

  .card .general .dler-info {
    top: 22%;
    width: 90%;
    height: 70%;
    display: flex;
    position: absolute;
    margin: 0 0 0 8%;
  }

  .card .general .dler-info p {
    padding: 8px !important;
    text-align: center;
    margin-bottom: 0;
  }

  .card .general .dler-info div {
    position: relative;
  }

  .card .general .dler-title {
    font-weight: bold;
    color: #444;
    font-size: 15px;
    display: inline-block;
    width: 45%;
    overflow: hidden;
    vertical-align:bottom;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 25px;
    height: 25px;
    text-align: left;
  }
          
  .card .general .dler-result {
    color: #444;
    font-size:16px;
    white-space: nowrap;
    display: inline-block;
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:bottom;
    text-align: right;
    line-height: 25px;
    height: 25px;
  }

  .card .general .dler-result2 {
    color: #444;
    font-size:16px;
    white-space: nowrap;
    display: inline-block;
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:bottom;
    text-align: right;
    line-height: 25px;
    height: 25px;
  }

  .card .general .btn {
    color: #fff;
    border-color: #337ab7 !important;
    background: #1473e6;
    background-color: #1473e6 !important;
    box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
    border-radius: 6px;
    width: 90px;
    height: 90px !important;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    overflow: hidden;
    -webkit-appearance:button;
  }

  .card .general .more {
    float: right;
    top: 88%;
    right: 0;
    font-size: 15px;
    line-height: 20px;
    padding: 0;
    position: absolute;
    display: inline-block;
    overflow: hidden;
    margin: 0 3% 0.5% 0;
  }
  </style>
</head>
<body>
<fieldset class="cbi-section">
<table width="100%"><tr><td>
<div class="center">
  <div id="card" class="card">
    <div id="additional" class="additional">
      <div class="user-card">
        <div class="img">
          <img id="dler_logo" src="" loading="lazy" title="Dler Cloud" alt="Dler Cloud" onerror="return imgerrorfuns(this,this.src)" onclick="return show_more()" />
        </div>
      </div>
      <div class="more-info" id="more_info">
        <h1>Dler Cloud</h1>
        <div class="coords" id="dler_it">
        	<%:Simple & trustworthy%>
        </div>
      </div>
    </div>
    <div class="general">
      <h1 id="dler-plan" ></h1>
      	<div class="dler-info">
      		<div style="width: 40%;">
            <p>
                <span class="dler-title"><%:Plan Expiration Time%>:</span><span class="dler-result" id="dler-plantime"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Account Balances%>:</span><span class="dler-result" id="dler-money"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Aff Balances%>:</span><span class="dler-result" id="dler-affmoney"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Account Integral%>:</span><span class="dler-result" id="dler-integral"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 40%;">
            <p>
                <span class="dler-title"><%:Today Used%>:</span><span class="dler-result2" id="dler-today-used"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Plan Used%>:</span><span class="dler-result2" id="dler-used"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Plan Unused%>:</span><span class="dler-result2" id="dler-unused"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Plan Traffic%>:</span><span class="dler-result2" id="dler-traffic"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 20%;">
        		<p style="margin: 14% 0 0 0">
        			<input type="button" class="btn" value="<%:Checkin%>" onclick="return dler_checkin_btn(this)">
        		</p>
        	</div>
        </div>
        <div>
          <p class="more">Powered by <a style="text-decoration: none; color: #666" onclick="return web_dler()" href="javascript:void(0);">dlercloud.com</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
</td></tr></table>
</fieldset>
</body>

<script type="text/javascript">//<![CDATA[
	var dler_plan = document.getElementById('dler-plan');
	var dler_plantime = document.getElementById('dler-plantime');
	var dler_money = document.getElementById('dler-money');
	var dler_affmoney = document.getElementById('dler-affmoney');
	var dler_today_used = document.getElementById('dler-today-used');
	var dler_used = document.getElementById('dler-used');
	var dler_unused = document.getElementById('dler-unused');
	var dler_traffic = document.getElementById('dler-traffic');
	var dler_integral = document.getElementById('dler-integral');
	var dler_checkin = document.getElementById('dler-checkin');
	var obj = document.getElementById("additional");
  var card = document.getElementById("card");
  var dler_it = document.getElementById("dler_it");
  var more_info = document.getElementById("more_info");
  var dler_logo = document.getElementById("dler_logo");
  var showmore=1;
   
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if (x && x.status == 200 && status.dler_info != "error") {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			show_info();
		}
		else {
			show_less();
		}
	});
	
	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if (x && x.status == 200 && status.dler_info != "error") {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			if (showmore != 0) {
			   show_info();
			}
			else {
			   show_less();
		  }
		}
		else {
			show_less();
		}
	});
	
function dler_checkin_btn(btn)
{
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_checkin")%>', null, function(x, status) {
		if ( x && x.status == 200 && status.dler_checkin != "error") {
			if (status.dler_checkin.ret == 200) {
				alert("<%:Dler Cloud Checkin Successful, Result:%>\n\n"+
				status.dler_checkin.data.checkin);
			}
			else if (status.dler_checkin.msg) {
				alert("<%:Dler Cloud Checkin Failed, Result:%>\n\n"+
				status.dler_checkin.msg);
			}
			else {
				alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
			}
		}
		else {
			alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
		}
	});
}
	
function web_dler()
{
   url='https://bit.ly/32mrABp';
   window.open(url);
}
       
function show_more()
{
	 if (obj.style.width == "150px") {
	    show_less();
	    showmore=0;
	 }
	 else {
	    if (dler_plan.value != "") {
         show_info();
         showmore=1;
		  }
		  else {
		     web_dler();
      }
	 }
}

function show_less()
{
   if (obj.style.width != "100%") {
      obj.style.width = "100%";
      obj.style.borderRadius = "0 5px 5px 0";
      card.style.height = "250px";
      more_info.style.display = "";
      more_info.style.transform = "translateY(11%)";
   }
   var rdmdl=Math.floor(Math.random()*6)+1;
   if(rdmdl==1)
   {
      dler_it.innerHTML = '<%:Simple & trustworthy%>';
   }
   if(rdmdl==2)
   {
      dler_it.innerHTML = '<%:Cross-platform Support%>';
   }
   if(rdmdl==3)
   {
      dler_it.innerHTML = '<%:Global Acceleration Network%>';
   }
   if(rdmdl==4)
   {
      dler_it.innerHTML = '<%:Easy to Use%>';
   }
   if(rdmdl==5)
   {
      dler_it.innerHTML = '<%:Intelligent Shunting%>';
   }
   if(rdmdl==6)
   {
      dler_it.innerHTML = '<%:Perfect Technical Support%>';
   }
}

function show_info()
{
   if (obj.style.width != "150px") {
      obj.style.width = "150px";
      obj.style.borderRadius = "0 0 0 0";
      card.style.height = "250px";
      more_info.style.display = "none";
   }
}

function imgerrorfuns(imgobj,imgSrc)
{
   setTimeout(function(){
      imgobj.src=imgSrc;
   },1000*10);
}

//]]></script>
</html>